<template>
  <div>首页{{ store.a }}</div>
  <button @click="add">添加</button>
  <button @click="go">跳转详情</button>
  <div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>
    <div class="box-item">6</div>
    <div class="box-item">7</div>
    <div class="box-item">8</div>
  </div>
</template>
<script>
import store from '@/store/index'
export default {
  components: {
  },
  data() {
    return {
      store,
      a: 1,
      b: 2,
      list: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    add() {
      this.store.add();
    },
    go() {
      this.$router.push({
        name: 'other'
      })
    }
  },
  mounted() {
    let t = {
      a: 1,
      b: 2
    }
    let res = t?.c?.d;
    console.log(`res`, res);
    console.log(`helloworld`);

    let a = 0;
    let value = a ?? '999';
    let v1 = a ??= 999;
    console.log(v1);

  }
}
</script>
<style lang="scss">
.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px 20px;
  &-item {
    border: 1px solid #000;
  }
}
</style>
